﻿@page "/GridSortData"
@layout DataProviderAccessArea<IFlatProductsProvider>
@inject IFlatProductsProvider FlatProductService

<div class="demo-description mw-1100">
    <h2>Data Grid - Sort Data</h2>
    <p>
        Users can click a column header to <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1#sort-data">sort grid data</a> by the corresponding column.
        An arrow glyph indicates the sort order.
        Users can click column headers with the <b>Shift</b> key pressed to sort data against multiple columns, or click the column header while <b>Ctrl</b> is pressed to clear sorting by a column.
    </p>
    <p>
        To disable sorting data in the entire grid, set the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.AllowSort">DxDataGrid.AllowSort</a> property to <b>false</b>.
        To specify sort settings for individual columns, use the following properties:
    </p>
    <ul>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGridColumn.AllowSort">AllowSort</a> - Specifies whether users can sort data by the column's values.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGridColumn.SortOrder">SortOrder</a> - Specifies the column's sort order.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGridColumn.SortIndex">SortIndex</a> - Specifies the column's position among sorted columns.</li>
    </ul>
    <p>
        In this demo, values in the <b>ID</b> column cannot be sorted
        The sort order for the <b>Category</b> and <b>Subcategory</b> columns are specified in the grid’s markup (see the code below)
    </p>
</div>

<DxDataGrid DataAsync="@FlatProductService.LoadAsync" CssClass="mw-1100">
    <DxDataGridColumn Field="@nameof(ProductFlat.Id)" Caption="ID" AllowSort="false" Width="50px"></DxDataGridColumn>
    <DxDataGridColumn Field="@nameof(ProductFlat.Category)" SortOrder="DataGridColumnSortOrder.Descending" Width="350px" SortIndex="0"></DxDataGridColumn>
    <DxDataGridColumn Field="@nameof(ProductFlat.Subcategory)" SortOrder="DataGridColumnSortOrder.Ascending" Width="350px" SortIndex="1"></DxDataGridColumn>
    <DxDataGridColumn Field="@nameof(ProductFlat.ProductName)" Caption="Product Name" Width="350px"></DxDataGridColumn>
</DxDataGrid>

<CodeSnippet_Grid_SortData></CodeSnippet_Grid_SortData>
